<script setup lang="ts">
import GoodBriefInfo from './components/GoodBriefInfo.vue'
import IpadBriefInfo from './components/IpadBriefInfo.vue'
import CompareIpad from './components/CompareIpad.vue'
import IpadFinalInfo from './components/IpadFinalInfo.vue'
import SubNavGuide from '../../components/SubNavGuide.vue'

import ipadPro from './imgs/ipad_pro.jpg'
import ipadAir from './imgs/ipad_air.jpg'
import ipadMini from './imgs/compare_ipad_mini.png'
import { SubItem } from '../../types'

const subItemList: SubItem[] = [
  {
    iconName: 'iPadMini',
    goodName: 'iPad mini'
  },
  {
    iconName: 'iPad',
    goodName: 'iPad Pro'
  }
]

</script>

<template>
  <SubNavGuide :sub-item-list="subItemList"></SubNavGuide>
  <GoodBriefInfo :good-name="'iPad Pro'" :good-info="'你的下一台电脑，何必是电脑。'" :font-color="'black'" :img-src="ipadPro"
    :background-color="'rgb(245, 245, 247)'">
  </GoodBriefInfo>
  <IpadBriefInfo :isNew="'no'" :reverseDirection="true" :screenSize="''" :goodName="'iPad Air'" :goodSignature="'超强，超值。'"
    :imgSrc="ipadAir" />
  <IpadBriefInfo :goodName="'iPad mini'" :goodSignature="'身量小，能量大。'" :imgSrc="ipadMini" />
  <CompareIpad></CompareIpad>
  <IpadFinalInfo></IpadFinalInfo>
</template>

<style scoped lang="less"></style>
